﻿<%--
  Created by IntelliJ IDEA.
  User: hongcy
  Date: 16-3-20
  Time: 下午9:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ include file="/include/taglib.jsp" %>
<span>选中图片会覆盖之前内容的所有图片,操作不可恢复，请谨慎操作！</span>
<div style="padding:20px 0px;">
    <form method="post" action="${ctx}/mulanweb/admin/chartered/update" id="ff">
        <input type="hidden" id="targetId" name="targetId" value="${param.targetId}"/>
        <table cellspacing="5" style="margin: 0 auto">
            <tr>
                <td>标题:</td>
                <td><input type="text" name="title" id="detail-title" class="easyui-textbox"
                           data-options="required:true,valiType:{length:[1,30]}" style="width:260px"></td>
            </tr>
            <tr>
                <td>详情介绍:</td>
                <td><input type="text" name="description" id="detail-description" class="easyui-textbox"
                           data-options="multiline:true,required:true,valiType:{length:[1,200]}"
                           style="width:260px;height:140px"/></td>
            </tr>
            <tr>
                <td>单价:</td>
                <td><input type="text" name="price" id="detail-price" class="easyui-numberbox"
                           data-options="required:true,precision:2,groupSeparator:',',decimalSeparator:'.',prefix:'￥',suffix:'元/张'"
                           style="width:260px"></td>
            </tr>
            <tr>
                <td colspan="2">logo图:<input id="detail-logoImage" type="file" size="30" name="fileselect" multiple/>
                </td>
            </tr>
            <tr>
                <td colspan="2">轮播图:<input id="detail-fileImage" type="file" size="30" name="fileselect" multiple/>
                </td>
            </tr>
        </table>
        <button id="photoSubmit" type="button" style="display: none"></button>
    </form>
    <div style="width:100%;height:auto;" id="detail-preview"></div>
</div>
<script type="text/javascript">
    var params = {
        fileInput: $("#detail-fileImage").get(0),
        upButton: $("#photoSubmit").get(0),
        url: $("#ff").attr("action"),
        filter: function (files) {
            var arrFiles = [];
            for (var i = 0, file; file = files[i]; i++) {
                if (file.type.indexOf("image") == 0) {
                    if (file.size >= 512000) {
                        alert('您这张"' + file.name + '"图片大小过大，应小于500k');
                    } else {
                        arrFiles.push(file);
                    }
                } else {
                    alert('文件"' + file.name + '"不是图片。');
                }
            }
            return arrFiles;
        },
        onSelect: function (files) {
            var html = '', i = 0;
            $("#detail-preview").html('<div class="upload_loading"></div>');
            var funAppendImage = function () {
                file = files[i];
                if (file) {
                    var reader = new FileReader()
                    reader.onload = function (e) {
                        html = html + '<div id="uploadList_' + i + '" style="float:left"><p>' +
                                '<a href="javascript:" class="upload_delete" title="删除" data-index="' + i + '">删除</a><br />' +
                                '<img id="uploadImage_' + i + '" src="' + e.target.result + '" class="upload_image" width="80px" height="80px"/></p>' +
                                '<span id="uploadProgress_' + i + '" class="upload_progress"></span>' +
                                '</div>';

                        i++;
                        funAppendImage();
                    }
                    reader.readAsDataURL(file);
                } else {
                    $("#detail-preview").html(html);
                    if (html) {
                        //删除方法
                        $(".upload_delete").click(function () {
                            ZXXFILE.funDeleteFile(files[parseInt($(this).attr("data-index"))]);
                            return false;
                        });
                        //提交按钮显示
                        $("#fileSubmit").show();
                    } else {
                        //提交按钮隐藏
                        $("#fileSubmit").hide();
                    }
                }
            };
            funAppendImage();
        },
        onDelete: function (file) {
            $("#uploadList_" + file.index).fadeOut();
        },
        onDragOver: function () {
            $(this).addClass("upload_drag_hover");
        },
        onDragLeave: function () {
            $(this).removeClass("upload_drag_hover");
        },
        onProgress: function (file, loaded, total) {
            var eleProgress = $("#uploadProgress_" + file.index), percent = (loaded / total * 100).toFixed(2) + '%';
            eleProgress.show().html(percent);
        },
        onSuccess: function (file, response) {
            $("#datagrid").datagrid("reload");
            $dialog.dialog("close");
            $("#uploadInf").append("<p>上传成功，图片地址是：" + response + "</p>");
        },
        onFailure: function (file) {
            $("#uploadInf").append("<p>图片" + file.name + "上传失败！</p>");
            $("#uploadImage_" + file.index).css("opacity", 0.2);
        },
        onComplete: function () {
            //提交按钮隐藏
            $("#fileSubmit").hide();
            //file控件value置空
            $("#fileImage").val("");
            $("#uploadInf").append("<p>当前图片全部上传完毕，可继续添加上传。</p>");
        }
    };
    ZXXFILE = $.extend(ZXXFILE, params);
    ZXXFILE.init();

    var params1 = {
        fileInput: $("#detail-logoImage").get(0),
        upButton: $("#photoSubmit").get(0),
        url: $("#ff").attr("action"),
        filter: function (files) {
            var arrFiles = [];
            for (var i = 0, file; file = files[i]; i++) {
                if (file.type.indexOf("image") == 0) {
                    if (file.size >= 512000) {
                        alert('您这张"' + file.name + '"图片大小过大，应小于500k');
                    } else {
                        arrFiles.push(file);
                    }
                } else {
                    alert('文件"' + file.name + '"不是图片。');
                }
            }
            return arrFiles;
        },
        onSelect: function (files) {
            var html = '', i = 0;
            $("#detail-preview").html('<div class="upload_loading"></div>');
            var funAppendImage = function () {
                file = files[i];
                console.info(file);
                if (file) {
                    var reader = new FileReader()
                    reader.onload = function (e) {
                        html = html + '<div id="uploadList_' + i + '" style="float:left"><p>' +
                                '<a href="javascript:" class="upload_delete" title="删除" data-index="' + i + '">删除</a><br />' +
                                '<img id="uploadImage_' + i + '" src="' + e.target.result + '" class="upload_image" width="80px" height="80px"/></p>' +
                                '<span id="uploadProgress_' + i + '" class="upload_progress"></span>' +
                                '</div>';
                        i++;
                        funAppendImage();
                    }
                    reader.readAsDataURL(file);
                } else {
                    $("#detail-preview").html(html);
                    if (html) {
                        //删除方法
                        $(".upload_delete").click(function () {
                            ZXXFILE.funDeleteFile(files[parseInt($(this).attr("data-index"))]);
                            return false;
                        });
                        //提交按钮显示
                        $("#fileSubmit").show();
                    } else {
                        //提交按钮隐藏
                        $("#fileSubmit").hide();
                    }
                }
            };
            funAppendImage();
        },
        onDelete: function (file) {
            $("#uploadList_" + file.index).fadeOut();
        },
        onDragOver: function () {
            $(this).addClass("upload_drag_hover");
        },
        onDragLeave: function () {
            $(this).removeClass("upload_drag_hover");
        },
        onProgress: function (file, loaded, total) {
            var eleProgress = $("#uploadProgress_" + file.index), percent = (loaded / total * 100).toFixed(2) + '%';
            eleProgress.show().html(percent);
        },
        onSuccess: function (file, response) {
            $("#datagrid").datagrid("reload");
            $dialog.dialog("close");
            $("#uploadInf").append("<p>上传成功，图片地址是：" + response + "</p>");
        },
        onFailure: function (file) {
            $("#uploadInf").append("<p>图片" + file.name + "上传失败！</p>");
            $("#uploadImage_" + file.index).css("opacity", 0.2);
        },
        onComplete: function () {
            //提交按钮隐藏
            $("#fileSubmit").hide();
            //file控件value置空
            $("#fileImage").val("");
            $("#uploadInf").append("<p>当前图片全部上传完毕，可继续添加上传。</p>");
        }
    };
    ZXXFILE = $.extend(ZXXFILE, params1);
    ZXXFILE.init();

    $(function () {
        var targetId = $("#targetId").val();
        if (targetId) {
            $.post(Constant.ctx("/mulanweb/admin/chartered/getDetail"), {targetId: targetId}, function (info) {
                if(info.ReturnCode == 1){
                    $("#detail-title").textbox("setValue",info.target.title);
                    $("#detail-description").textbox("setValue",info.target.description);
                    $("#detail-price").numberbox("setValue",info.target.price);
                }
            });
        }
    })
</script>
